<template>
  <div class="dashboard-container home">
    <!-- 标题 -->
    <TitleIndex @sendTitleInd="getTitleNum" :flag="flag" :tateData="tateData" />
    <!-- end -->
    <div class="homeMain">
      <!-- 营业额统计 -->
      <TurnoverStatistics :turnoverdata="turnoverData" />
      <!-- end -->
      <!-- 用户统计 -->
      <UserStatistics :userdata="userData" />
      <!-- end -->
    </div>
    <div class="homeMain homecon">
      <!-- 订单统计 -->
      <OrderStatistics :orderdata="orderData" />
      <!-- end -->
      <!-- 销量排名TOP10 -->
      <Top :top10data="top10Data" />
      <!-- end -->
    </div>
  </div>
</template>

<script>

import {
  get1stAndToday,
  past7Day,
  past30Day,
  pastWeek,
  pastMonth,
} from '@/utils/formValidate'
// 组件
import TitleIndex from './components/titleIndex.vue'
import TurnoverStatistics from './components/turnoverStatistics.vue'
import UserStatistics from './components/userStatistics.vue'
import OrderStatistics from './components/orderStatistics.vue'
import Top from './components/top10.vue'
import request from "@/utils/request";


export default {
  name: 'Statistics',
  components: {
    TitleIndex,
    TurnoverStatistics,
    UserStatistics,
    OrderStatistics,
    Top,
  },
  data() {
    return {
      flag: 2,
      tateData: [],
      turnoverData: {},
      userData: {},
      orderData: {
        data: {},
      },
      top10Data: {},
    }
  },
  created() {
    // this.init(this.flag)
    this.getTitleNum(2);
  },
  methods: {
    async init(begin, end) {
      this.$nextTick(() => {
        // console.log(begin, end)
        this.getTurnoverStatisticsData(begin, end);
        this.getUserStatisticsData(begin, end);
        this.getOrderStatisticsData(begin, end);
        this.getTopData(begin, end);
      });
    },

    async getTurnoverStatisticsData(begin, end) {
      const data = await request.get('admin/report/turnoverStatistics',  {params:{ begin, end } });
      const turnoverData = data.data;
      this.turnoverData = {
        dateList: turnoverData.dateList.split(','),
        turnoverList: turnoverData.turnoverList.split(','),
      };
      // this.tateData = this.turnoverData.date;
      // const arr = [];
      // this.tateData.forEach((val) => {
      //   let date = new Date();
      //   let year = date.getFullYear();
      //   arr.push(year + '-' + val);
      // });
      // this.tateData = arr;
    },

    async getUserStatisticsData(begin, end) {
      const data = await request.get('admin/report/userStatistics',  {params:{ begin, end } });
      const userData = data.data;
      this.userData = {
        dateList: userData.dateList.split(','),
        totalUserList: userData.totalUserList.split(','),
        newUserList: userData.newUserList.split(','),
      };
    },

    async getOrderStatisticsData(begin, end) {
      const data = await request.get('admin/report/orderStatistics',  {params:{ begin, end } });
      const orderData = data.data;
      this.orderData = {
        data: {
          dateList: orderData.dateList.split(','),
          orderCountList: orderData.orderCountList.split(','),
          validOrderCountList: orderData.validOrderCountList.split(','),
          // orderCompletionRateList: orderData.orderCompletionRateList.split(','),
        },
        totalOrderCount: orderData.totalOrderCount,
        validOrderCount: orderData.validOrderCount,
        orderCompletionRate: orderData.orderCompletionRate,
      };
    },

    async getTopData(begin, end) {
      const data = await request.get('admin/report/top10',  {params:{ begin, end } });
      const top10Data = data.data;
      this.top10Data = {
        nameList: top10Data.nameList.split(',').reverse(),
        numberList: top10Data.numberList.split(',').reverse(),
      };
      // console.log(this.top10Data);
    },

    getTitleNum(data) {
      switch (data) {
        case 1:
          this.tateData = get1stAndToday();
          break;
        case 2:
          this.tateData = past7Day();
          break;
        case 3:
          this.tateData = past30Day();
          break;
        case 4:
          this.tateData = pastWeek();
          break;
        case 5:
          this.tateData = pastMonth();
          break;
      }
      this.init(this.tateData[0], this.tateData[1]);
    },
  },
}
</script>
<style>
.home {
  .container {
    padding: 20px;
    .homeTitleBtn{
      line-height: 36px;
    }
  }
}
.dashboard-container.home{
  .homeMain {
    &.homecon{
      .container {
        margin-bottom: 0;
      }
    }
  }
}
.homeMain {
  display: flex;

  .container {
    flex: 1;

    &:last-child {
      margin-left: 20px;
    }
  }
}

.orderListLine{
  width: 360px;
  margin: 0 auto;
  display: flex;
  margin-top: -10px;

  li{
    font-size: 12px;
    color: #666666;
    padding: 0 6px;
    align-items: center;
    display: flex;
    height: 20px;
    span{
      display: inline-block;
      width: 12px;
      height: 2px;
      overflow: hidden;
      margin-right: 8px;
    }
    &.one{
      span{
        background:#FFC100 ;
      }

    }
    &.two{
      span{
        background: #7f85fc;
      }

    }
    &.three{
      span{
        background:#FD7F7F;
      }

    }
  }
}
.orderListLine.user{
  width: 260px;
}
.orderListLine.turnover{
  width: 70px;
}

.container {
  background-color: #ffffff; /* 这是浅黄色 */
  margin: 20px; /* 根据需要调整内外边距 */
}

</style>